<template>
    <div>
        <Form :label-width="80" inline>
            <FormItem label="名称">
                <Input @on-clear="getAllTeacher" v-model="param.name" clearable class="myform"/>
            </FormItem>
            <FormItem label="工号">
                <Input @on-clear="getAllTeacher" v-model="param.worker" clearable class="myform"/>
            </FormItem>
            <FormItem label="学院">
                <Select @on-clear="getAllTeacher" v-model="param.collegeId" clearable class="myform">
                    <Option v-for="item in modal.list" :key="item.collegeId" :value="item.collegeId">
                        {{item.name}}
                    </Option>
                </Select>
            </FormItem>
            <FormItem label="职称">
                <Input @on-clear="getAllTeacher" v-model="param.position" clearable class="myform"/>
                <Button icon="ios-search" type="success" @click="getAllTeacher" class="btn">查询</Button>
            </FormItem>
        </Form>
        <Row>
            <Col span="2">
                <Button class="mybtn1" icon="md-add-circle" @click="modal.addTeacherFlag = true" type="info">添加</Button>
            </Col>
            <Col span="2">
                <Button style="margin-left: -40px" class="mybtn1" icon="md-cloud-upload" @click="" type="info">导出表格</Button>
            </Col>
            <Col span="2">
                <!--<Button class="mybtn1" icon="md-cloud-download" @click="" type="primary">模板下载</Button>-->
                <download-excel
                        class = "export-excel-wrapper"
                        :data = "json_data"
                        :fields = "json_fields"
                        name = "学院信息表.xls">
                    <Button style="margin-left: -50px" class="mybtn1" icon="md-cloud-download" type="primary">模板下载</Button>
                </download-excel>
            </Col>
            <Col span="2">
                <Button style="margin-left: -60px" class="mybtn1" icon="md-cloud-download" @click="modalUpload.modalUploadFlag = true" type="primary">导入数据</Button>
            </Col>
        </Row>
        <Table :loading="loading" border :columns="columns" :data="data">
            <template slot-scope="{ row, index }" slot="action">
                <Button icon="ios-build" type="primary" size="small" style="margin-right: 5px" @click="modalEdit.editTeacherFlag = true,Object.assign(modalEdit.teacher,row)">编辑</Button>
                <Button icon="md-trash" type="error" size="small" @click="remove(row,index)">删除</Button>
            </template>
        </Table>
        <Page :total="total" :page-size="param.size" @on-change="changePage" @on-page-size-change="changePageSize"
              show-sizer show-total show-elevator transfer/>
        <add-teacher :modal="modal"/>
        <edit-teacher :modal="modalEdit"/>
        <uploda-modal :modal="modalUpload" @changeStatus="getAllTeacher"/>
    </div>
</template>

<script>
    import addTeacher from "../../components/modal/basicData/addTeacher";
    import editTeacher from "../../components/modal/basicData/editTeacher";
    import uplodaModal from "../../components/modal/basicData/uplodaModal";

    export default {
        components:{
            addTeacher,
            editTeacher,
            uplodaModal
        },
        data() {
            return {
                modal:{
                    addTeacherFlag:false,
                    list:[]
                },
                modalUpload:{
                    modalUploadFlag:false,
                    url:"/teacher/uplodaExcl"
                },
                modalEdit:{
                    editTeacherFlag:false,
                    teacher:{},
                    list:[]
                },
                total:0,
                param:{
                    page:1,
                    size:1,
                    name:"",
                    worker:"",
                    position:"",
                    collegeId:""

                },
                loading:false,
                columns: [
                    {
                        type: 'index',
                        width: 70,
                        title: '序号',
                        align: 'center'
                    },
                    {
                        title: '工号',
                        key: 'worker'
                    },
                    {
                        title: '名称',
                        key: 'name'
                    },
                    {
                        title: '性别',
                        key: 'sex'
                    },
                    {
                        title: '出生年月日',
                        key: 'birthday'
                    },
                    {
                        title: '职称',
                        key: 'position'
                    },
                    {
                        title: '学院',
                        key: 'collegeName'
                    },
                    {
                        title: '操作',
                        slot: 'action',
                        width: 200,
                        align: 'center'
                    }
                ],
                data: [],
            }
        },
        methods: {
            remove(row,index) {
                this.http.delete(`/teacher/deleteTeacherById/${row.teacherId}`).then(res => {
                    if (res.data) {
                        this.$Message.success({
                            background: true,
                            content: "删除成功"
                        })
                        this.data.splice(index, 1)
                    }
                })
            },
            /**
             * 点击下一页
             * @param val
             */
            changePage(val) {
                this.param.page = val
                this.getAllTeacher()
            },
            /**
             * 切换分页的每页显示条数
             * @param val
             */
            changePageSize(val) {
                this.param.size = val
                if (this.param.page === 1) {
                    this.getAllTeacher()
                }
            },
            /**
             * 获取所有学院信息
             */
            async getAllCollege(){
                await this.http.get('/college/getAllCollegewithNopamrm').then(res=>{
                    this.modal.list = res.data;
                    this.modalEdit.list = res.data;
                })
            },
            /**
             * 获取全部教师信息
             */
            getAllTeacher(){
                this.loading=true;
                this.http.post('/teacher/getAllTeacher',this.qs.parse(this.param)).then(res =>{
                    if (res.data) {
                        this.data = res.data.list
                        this.total = res.data.total
                    }
                }).finally(f=>{
                    this.loading=false
                });

            }
        },
        created() {
            this.getAllCollege();
            this.getAllTeacher();
        }
    }
</script>
<style scoped>
    .myform {
        width: 300px;
    }

    .btn {
        margin-left: 10px;
    }
</style>